<template>
    <div class="fault">
        <!-- 手机评估进度条 -->
        <div class="progress-wrapper">
            <kgm-progress :curLength="parseInt(curLength)" :maxLength="parseInt(maxLength)"></kgm-progress>
        </div>
        <!-- 故障信息，可滑动 -->
        <scroll ref="scroll" class="scroll-content">
            <div class="scroll-warpper" v-if="faultInfo">
                <ul class="outer">
                    <li class="outer-item" v-for="(fault, index) in faultInfo" :key="index">
                        <div class="outer-title">
                            <div class="index">{{index+1}}.</div>
                            <div class="text">{{fault.title}}
                                <template v-if="fault.type==2">
                                    <div class="other">(可多选，若无问题可点击查看估价)</div>
                                </template>
                            </div>
                            <div class="dot" v-if="fault.type==1" @click="setFaultShow(fault,index)">
                                <span>?</span>
                            </div>
                        </div>
                        <template v-if="fault.type==1">
                            <ul class="inner">
                                <li class="inner-item" v-for="(item, i) in fault.data" :key="i">
                                    <div class="inner-text" :class="{active: fault.data_type == item.id}" @click="singleClick($event, index, i)" >
                                        {{item.title}}
                                    </div>
                                </li>
                            </ul>
                        </template>
                        <template v-if="fault.type==2">
                            <ul class="inner">
                                <li class="inner-item" v-for="(item, i) in fault.data" :key="i">
                                    <template v-if="fault.data_type">
                                        <div class="inner-text" :class="{active: fault.data_type.indexOf(item.id)!=-1}" @click="doubleClick($event, index, i)" >
                                            {{item.title}}
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div class="inner-text" @click="doubleClick($event, index, i)" >
                                            {{item.title}}
                                        </div>
                                    </template>
                                </li>
                            </ul>
                        </template>
                    </li>
                </ul>
                <!-- 按钮 -->
                <div class="btn-wrapper" v-if="curLength" @click="getoInfo">
                    <button-medium text="查看估价" :bg="bg" ref="btn"></button-medium>
                </div>
            </div>
        </scroll>
        <!-- 弹出模态框 -->
        <transition name="fade">
            <div class="modal" v-if="faultShow">
                <div class="modal-wrapper">
                    <!-- 轮播图 -->
                    <div class="slider-wrapper">
                        <slider>
                            <div v-for="item in faultData.img">
                                <a href="javascript:void(-1)">
                                    <img class="needsclick" width="100%" :src="item">
                                </a>
                            </div>
                        </slider>
                    </div>
                    <div class="desc">{{faultData.img_desc}}</div>
                </div>
                <div class="close" @click="faultShow=false">
                    <i class="icon iconfont icon-close"></i>
                </div>
            </div>
        </transition>
        <!--下一页视图-->
        <transition name="fade">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
    import {toast, indicator} from '../../base/js/toast.js'
    import {changeTitle} from '../../common/js/dom.js'  
    import KgmProgress from '../parts/progress.vue'                //进度条
    import Scroll from '../../base/scroll/scroll.vue'       //缓动框架
    import ButtonMedium from '../parts/buttonMedium.vue'       //按钮
    import Slider from '../../base/slider/slider.vue'       //轮播图
    //导入Vue
    import Vue from 'vue'

    export default {
        data() {
            return {
                bid: this.$route.query.bid,     //获取品牌id
                mid: this.$route.query.mid,     //获取型号id
                phoneInfo:{},                   //当前的手机信息
                faultInfo:[],                   //故障信息
                faultData:false,                //点击展示当前的时哪一种故障信息（模态框）
                faultShow:false,                //是否显示（模态框）
                bg: '#fff',                     //提交按钮背景色
                userChoice: {},                 //当前用户选择的手机的信息
                maxLength: 0,                   //单选按钮最长数量
                curLength: 0,                   //用户选择的按钮数量
            }
        },
        props: {},
        components: {KgmProgress, Scroll, ButtonMedium, Slider},
        created() {
            //保存到本地防止数据丢失
            if(this.bid!=undefined){
                //本地存储bid和mid
                localStorage.setItem('hs_bid',this.bid)
                localStorage.setItem('hs_mid',this.mid)
            }else{
                //从本地存储获取数据
                this.bid = localStorage.getItem('hs_bid')
                this.mid = localStorage.getItem('hs_mid')
            }
            this.getModel(this.bid)
            this.getFault()
        },
        methods: {
            //获取型号和手机信息
            async getModel(id){
                try {
                    var result = await this.$ajax.get('/model/'+id)
                    if(result.status == 200) {
                        var model = result.data.data
                        // console.log(model)
                        //获取当前手机信息
                        model.forEach(item => {
                            if(item.model_id == this.mid) {
                                this.phoneInfo = item
                            }
                        })
                        // console.log(this.phoneInfo)
                    }
                } catch(err) {
                    this.phoneInfo={}
                    //去除加载中小图标
                    indicator()
                }
            },
            //获取故障信息
            async getFault(){
                try {
                    var result = await this.$ajax.get('/fault')
                    if(result.status == 200) {
                        this.faultInfo = result.data
                        // console.log(this.faultInfo)
                    }
                } catch(err) {
                    this.faultInfo=[]
                    //去除加载中小图标
                    indicator()
                }
            },
            //点击单选按钮
            singleClick(event, index, i) {
                //禁止非scroll允许的的点击事件
                if(!event._constructed){
                    return
                }
                //给故障类增加一个属性，并赋值
                if(!this.faultInfo[index].data_type){
                    Vue.set(this.faultInfo[index], 'data_type', -1)
                    this.faultInfo[index].data_type = this.faultInfo[index].data[i].id
                }else{
                    this.faultInfo[index].data_type = this.faultInfo[index].data[i].id
                }
                // console.log(this.faultInfo)
                //滚动到指定元素
                var scrollObj = event.target.parentNode.parentNode.parentNode
                this.$refs.scroll.scrollToElement(scrollObj,300) 
            },
            //点击多选按钮
            doubleClick(event, index, i) {
                //禁止非scroll允许的的点击事件
                if(!event._constructed){
                    return
                }
                //给故障类增加一个属性，并赋值,这是一个对象数组
                if(!this.faultInfo[index].data_type){
                    Vue.set(this.faultInfo[index], 'data_type', [])
                }

                // 判断当前值是否存在
                var value = this.faultInfo[index].data[i].id 
                if(this.faultInfo[index].data_type.indexOf(value)==-1){
                    //不存在该值，就添加
                    this.faultInfo[index].data_type.push(value)
                }else{
                    //存在,获取当前元素下标，并删除
                    var arrIndex = this.faultInfo[index].data_type.indexOf(value)
                    this.faultInfo[index].data_type.splice(arrIndex, 1);
                }
                // console.log(this.faultInfo)
                //多选按钮点击
            },
            //点击提交按钮
            getoInfo(){
                //获取总价钱,保存进去
                this.userChoice.price =  this.getTotalPrice(this.userChoice, this.phoneInfo.top_price)
                console.log(this.userChoice)
                //如果用户已经选择完毕，允许跳转
                if(this.maxLength == this.curLength) {
                    //保存到本地防止数据丢失
                    //本地存储用户数据
                    var str = JSON.stringify(this.userChoice)
                    localStorage.setItem('userChoice',str)
                    //页面跳转
                    this.$router.push({ path: 'hsfault/hsinfo/'})
                }else{
                    toast('请选择故障信息！')
                }
                
            },
            //获取总价钱
            getTotalPrice(userFault, top_price){
                var rate = 1        //价钱比率
                userFault.single.forEach(item=>{
                    rate = rate*item.rate
                })
                userFault.double.forEach(item=>{
                    rate = rate*item.rate
                })
                return parseInt(top_price*parseFloat(rate))
            },
            //点击弹出故障信息的模态框
            setFaultShow(fault,index) {
                this.faultData = fault
                this.faultShow = true
            }
        },
        watch:{
            //手机品牌型号变化，修改title的值
            phoneInfo(curVal,oldVal){
                // console.log(curVal,oldVal);
                //修改页面标题
                var titleStr = "手机回收-" + curVal.brand + "&nbsp;" + curVal.model
                changeTitle(titleStr)
                //保存品牌，型号信息
                this.userChoice.phone = curVal
            },
            //深度监听，修改用户点选的值
            'faultInfo': {
                handler: function(curVal,oldVal){   //userChoice
                    // 单选的最大长度
                    this.maxLength = curVal.length-1
                    //获取用户选取的数据，数组
                    this.userChoice.single = []
                    this.userChoice.double = []
                    // console.log(this.userChoice)
                    curVal.forEach((item, index) => {
                        //单选按钮
                        if(item.type == 1){
                            //用户是否已经选择
                            if(item.data_type){
                                for(var j = 0; j<item.data.length; j++){
                                        if(item.data[j].id == item.data_type) {
                                        this.userChoice.single.push(item.data[j])
                                    }
                                }
                            }
                        }else if(item.type == 2){
                            //多选按钮
                            //用户是否已经选择
                            if(item.data_type){
                                //遍历用户选择过的多选按钮数据
                                for(var j = 0; j<item.data_type.length; j++){
                                    item.data.forEach( child => {
                                        if(child.id == item.data_type[j]){
                                            this.userChoice.double.push(child)
                                        }
                                    })
                                }
                            }
                        }
                    })
                    //当前已经选择的故障长度
                    this.curLength = this.userChoice.single.length
                    // console.log(this.userChoice)

                    //监听用户选择的手机信息，控制提交按钮的样式
                    if(this.maxLength == this.curLength){
                        this.$refs.btn.setBgcolor('#fcdb00')
                    }
                },
                deep: true
            },
        },
    }
    
</script>
<style  lang="less" scoped>
    @import "../../common/less/variable.less";
    .fault{
        //进度条
        .progress-wrapper{
            width:100%;
            position:fixed;
            top:0;
            left:0;
            z-index:20;
        }
        //滑动框架
        .scroll-content{
            position:fixed;
            left:0;
            top:30px;
            bottom:0;
            width:100%;
            overflow:hidden;
            background:@color-gray-bg;
            z-index:18;
            .scroll-warpper{
                .outer{
                    .outer-item{
                        margin:0 10px;
                        .outer-title{
                            height:40px;
                            padding-top: 5px;
                            div{
                                display:inline-block;
                                font-size:14px;
                                color:@color-alert-title;
                                line-height:40px;
                            }
                            .dot{
                                width: 30px;
                                height: 30px;
                                text-align: center;
                                padding: 5px;
                                box-sizing: border-box;
                                span{
                                    display:block;
                                    width:100%;
                                    height:100%;
                                    line-height: 20px;
                                    background: #fff;
                                    border-radius: 50%;
                                    color:@color-blue;
                                }
                            }
                            .other{
                                font-size:10px;
                                color:@color-alert-con;
                            }
                        }
                        .inner{
                            border-radius:@border-alert-radius;
                            background:#fff;
                            padding:10px 0 0 10px;
                            overflow:hidden;
                            .inner-item{
                                display:table;
                                font-size:12px;
                                text-align:center;
                                height:50px;
                                width: 33.33%;
                                padding:0 10px 10px 0;
                                float: left;
                                box-sizing: border-box;
                                position:relative;
                                .inner-text{
                                    display:table-cell;
                                    vertical-align: middle;
                                    height:50px;
                                    padding:0 5px;
                                    text-align:center;
                                    border:1px solid @color-alert-line;
                                    border-radius:@border-alert-radius;
                                    line-height: 15px;
                                    &.active{
                                        color:@color-alert-title;
                                        background:@color-yellow;
                                        border:1px solid @color-yellow;
                                    }
                                }
                            }
                                
                        }
                    }
                }
                //按钮
                .btn-wrapper{
                    padding:10px 0;
                }
            }
        }
        //错误故障的模态框
        .modal{
            position:fixed;
            top:0;
            left:0;
            height:100%;
            width:100%;
            z-index:100;
            background:rgba(0,0,0,0.7);
            .modal-wrapper{
                position:absolute;
                top:50%;
                left:0;
                width:100%;
                transform: translate(0,-50%);
                border-radius: 5px;
                .slider-wrapper{
                    position:relative;
                    max-width:100%;
                    margin:0 10px;
                    box-sizing:border-box;
                    overflow: hidden;
                    height:150px;
                    border-top-left-radius: 5px;
                    border-top-right-radius: 5px;
                    padding: 5px;
                    background: #fff;
                }
                .desc{
                    padding:10px;
                    margin:0px 10px 0px;
                    font-size:12px;
                    color:@color-alert-title;
                    text-align:center;
                    line-height:15px;
                    background:#fff;
                    border-bottom-left-radius: 5px;
                    border-bottom-right-radius: 5px;
                }
                
            }
            .close{
                position:absolute;
                left:0;
                bottom:50px;
                width:100%;
                text-align:center;
                i{
                    font-size:25px;
                    color:#fff;
                    padding:10px;
                }
            }
        }
    }
</style>
